import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Heart, ShoppingCart } from "lucide-react"

export default function FavoritesPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">我的收藏</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {favorites.map((item) => (
          <Card key={item.id} className="group">
            <CardHeader className="p-0">
              <div className="aspect-square relative overflow-hidden rounded-t-lg">
                <img
                  src={item.image || "/placeholder.svg"}
                  alt={item.name}
                  className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
                />
              </div>
            </CardHeader>
            <CardContent className="p-4">
              <h3 className="font-semibold mb-2">{item.name}</h3>
              <p className="text-2xl font-bold text-primary">¥{item.price}</p>
              <p className="text-sm text-muted-foreground mt-2">{item.description}</p>
            </CardContent>
            <CardFooter className="p-4 pt-0 flex gap-2">
              <Button className="flex-1">
                <ShoppingCart className="w-4 h-4 mr-2" />
                加入购物车
              </Button>
              <Button variant="destructive" size="icon">
                <Heart className="w-4 h-4" />
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </div>
  )
}

const favorites = [
  {
    id: 1,
    name: "无线蓝牙耳机",
    price: 299,
    description: "高品质音效，持久续航",
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: 2,
    name: "智能手表",
    price: 599,
    description: "健康监测，运动追踪",
    image: "/placeholder.svg?height=400&width=400",
  },
]

